<script setup>


const text = ref('想起了亮剑里的一句台词: 整个晋西北都乱成了一锅粥～');
const leng = ref(text.value.length);
const conduct = ref(0);
const start = () => {
  setTimeout(() => {
    conduct.value++;
    if (leng.value == conduct.value) {
      return
    } else {
      start()
    }
  }, 500)
}
start()

</script>

<template>
  <p class="text-box">
    <template v-for="(item, index) in text">
      <span class="span-show"  :key="index" v-if="conduct>index">{{ item }}</span>
    </template>
  </p>
</template>

<style scoped>
.span-show{
  animation: show 0.5s;
}
@keyframes show {
    from{color: #fff;}
    to{
      color: #333;
    }
}

</style>
